<template>
  <div>
    <div class="head" :style="{backgroundImage: 'url(' + coverUrl + ')'}">
      <div class="info box box-lr"  >
        <div class="info-left">
          <img :src="getImages(coverUrl)" class="lazyimg" alt="">
          <div class="look" v-if="videoUrls.length > 0">
            <span class="iconfont icon-play">&#xe77d;</span>
          </div>
        </div>
        <div class="info-right">
          <div class="tit">{{tit}}</div>
          <div class="start box"><my-rate :score="rating/2" disabled/> <span class="rating">{{rating}}</span></div>
          <div class="grade">（{{favoriteCount}}人点评）</div>
          <div class="tas">
            <div class="type" v-text="getGenres(genres)"></div>
            <div class="address"><span v-text="getGenres(countries)"></span>/{{durationMin}}分钟</div>
            <div class="sy">{{releaseDates[0]}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="description">
      <div class="tit">{{tit}}的剧情简介</div>
      <div class="txt">
        {{description}}
      </div>
    </div>
  </div>
</template>

<script>
import MyRate from 'common/star/Star'
export default {
  name: 'DetailInfo',
  props: {
    tit: String,
    coverUrl: String,
    rating: Number,
    favoriteCount: Number,
    genres: Array,
    countries: Array,
    durationMin: Number,
    releaseDates: Array,
    description: String,
    videoUrls: Array
  },
  components: {
    MyRate
  },
  methods: {
    getImages (_url) {
      if (_url !== undefined) {
        let _u = _url.substring(7)
        return 'https://images.weserv.nl/?url=' + _u
      }
    },
    getGenres (e) {
      let x
      let arr = []
      for (x in e) {
        arr.push(e[x])
      }
      return arr.join(',')
    }
  }
}
</script>

<style scoped lang="stylus">
  .head
    background-size: 100%
    background-repeat: no-repeat
  .info
    padding: .2rem .3rem
    opacity: .8
    background: #000000
    .info-left
      position: relative
      img
        width: 2.2rem
        border: .01rem solid #727474
      .look
        position: absolute
        top: 50%
        width: 100%
        margin-top: -.4rem
        text-align: center
        .icon-play
          font-size: .8rem
          height: .8rem
          line-height: .8rem
          color: #ffffff
    .info-right
      margin-left: .3rem
      .tit
        font-size: .48rem
        color: #ffffff
      .start
        margin-top: .2rem
        color: #ffce00
        font-size: .32rem
        height: .48rem
        .rating
          margin-left: .2rem
      .grade
        font-size: .22rem
        color: #ffffff
        line-height: .28rem
      .tas
        margin-top: .2rem
        color: #93a8ab
        font-size: .28rem
        line-height: .48rem
  .description
    padding: .1rem .3rem
    .tit
      margin-top: .05rem
      height: .8rem
      line-height: .8rem
      font-size: .28rem
      color: #808080
    .txt
      line-height: .5rem
      font-size: .32rem
</style>
